<template>
  <aside class="flex">
    <div
      class="flex h-[80vh] w-80 sm:h-[80vh] sm:w-80 flex-col overflow-y-auto bg-slate-50 pt-8 dark:border-slate-700 dark:bg-slate-900"
    >
      <div class="flex px-4">
        <h2 class="px-5 text-lg font-medium text-slate-800 dark:text-slate-200">
          Chats
          <span
            class="mx-2 rounded-full bg-blue-600 px-2 py-1 text-xs text-slate-200"
            >6</span
          >
        </h2>
      </div>
      <div class="mx-2 mt-8">
        <button
          class="flex w-full gap-x-4 rounded-lg border border-slate-300 p-4 text-left text-sm font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 5l0 14"></path>
            <path d="M5 12l14 0"></path>
          </svg>
          New Chat
        </button>
      </div>
      <!-- Previous chats container -->
      <div
        class="h-full space-y-4 overflow-y-auto border-b border-slate-300 px-2 py-4 dark:border-slate-700"
      >
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            Tailwind Classes
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">12 Mar</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg bg-slate-200 px-3 py-2 text-left transition-colors duration-200 focus:outline-none dark:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            explain quantum computing
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">10 Feb</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to create ERP Diagram
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">22 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            API Scaling Strategies
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            What is GPT UI?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
        <button
          class="flex w-full flex-col gap-y-2 rounded-lg px-3 py-2 text-left transition-colors duration-200 hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-800"
        >
          <h1
            class="text-sm font-medium capitalize text-slate-700 dark:text-slate-200"
          >
            How to use Tailwind components?
          </h1>
          <p class="text-xs text-slate-500 dark:text-slate-400">1 Jan</p>
        </button>
      </div>
    </div>
    <div
      class="flex h-[84vh] w-full flex-col"
      style="padding-block: 50px;padding-inline: 150px"
    >
      <!-- Prompt Messages -->
      <div
        class="flex-1 overflow-y-auto rounded-xl p-4 text-sm leading-6 text-slate-900 dark:bg-slate-800 dark:text-slate-300 sm:text-base sm:leading-7"
      >
        <div v-for="record in records">
          <MessageUser v-if="record.type == 0" :record="record"></MessageUser>
        </div>

        <!-- <div class="mb-2 flex w-full flex-row justify-end gap-x-2 text-slate-500">
                  <button class="hover:text-blue-600">
                      <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path
                          d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"
                      ></path>
                      </svg>
                  </button>
                  <button class="hover:text-blue-600" type="button">
                      <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path
                          d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"
                      ></path>
                      </svg>
                  </button>
                  <button class="hover:text-blue-600" type="button">
                      <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      viewBox="0 0 24 24"
                      stroke-width="2"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path
                          d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
                      ></path>
                      <path
                          d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
                      ></path>
                      </svg>
                  </button>
                  </div> -->
      </div>
      <!-- Prompt message input -->
      <div class="mt-4 flex justify-center">
        <button
          @click="regenerate"
          class="inline-flex items-center gap-x-2 rounded-lg p-2 text-xs text-slate-600 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-blue-600 sm:text-sm"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="inline h-4 w-4"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"
            ></path>
            <path d="M20 4v5h-5"></path>
          </svg>
          重新生成
        </button>
      </div>
      <!-- Rounded input -->
      <form>
        <label for="chat-input" class="sr-only">Enter your prompt</label>
        <div class="relative">
          <button
            type="button"
            class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-600"
          >
            <svg
              aria-hidden="true"
              class="h-5 w-5"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"
              ></path>
              <path d="M5 10a7 7 0 0 0 14 0"></path>
              <path d="M8 21l8 0"></path>
              <path d="M12 17l0 4"></path>
            </svg>
            <span class="sr-only">Use voice input</span>
          </button>
          <textarea
            v-model="message"
            id="chat-input"
            class="mt-2 block w-full resize-none border-none bg-slate-200 p-4 pl-10 pr-20 text-sm text-slate-900 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:text-slate-200 dark:placeholder-slate-400 dark:focus:ring-blue-600 sm:text-base"
            placeholder="Enter your prompt"
            rows="1"
            required
          ></textarea>
          <button
            type="button"
            @click="callStreamEndpoint"
            class="absolute bottom-2 right-2.5 rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:text-base"
          >
            发送
          </button>
        </div>
      </form>
    </div>
  </aside>
</template>
<script setup>
import { reactive, ref } from "vue";
import MessageUser from "./MessageUser.vue";

const message = ref("使用Java的stream对List集合排序");
const prevMessage = ref("");
const records = reactive([]);

const callStreamEndpoint = () => {
  const msg = message.value;
  records.push(
    ...[
      {
        type: 0,
        msg: msg,
      },
    ]
  );
  prevMessage.value = message.value;
  message.value = "";
};

const regenerate = () => {
  const msg = prevMessage.value;
  records.push(
    ...[
      {
        type: 0,
        msg: msg,
      },
    ]
  );
  message.value = "";
};
</script>
